import { ChapterContext } from '@/hooks/useChapterContext'
import Typography from '@mui/material/Typography'
import React, { useContext, useState } from 'react'

import Card from '@mui/material/Card'
import CardActions from '@mui/material/CardActions'
import BaseNode, { NodeType } from '@/Model/Node/BaseNode'

import Button from '@mui/material/Button'
import ButtonGroup from '@mui/material/ButtonGroup'
import Stack from '@mui/material/Stack'
import CardContent from '@mui/material/CardContent'
import ListItem from '@mui/material/ListItem'
import List from '@mui/material/List'
import ListItemButton from '@mui/material/ListItemButton'


import DecisionNode from '@/Model/Node/DecisionNode'
import { useNavigate } from 'react-router'
import { Divider } from '@mui/material'

interface Props{
  editor?:boolean
}
export default function SimulatorCard(props:Props){  
  const chapterContext = useContext(ChapterContext)
  const [chapter, setChapter] = chapterContext?.chapter
  const [currentCard, setCurrentCard] = chapterContext.currentCard
  const [_, setRefresh] = chapterContext.refresh
  const nodes = chapter.nodes
  let navigate = useNavigate()
  const [oldCard, setOldCard] = useState('')
  
  const next = ()=>{
    if(nodes[currentCard].action){
      try{
        console.log('===')
        const res = eval(nodes[currentCard].action)
        console.log(res)
        console.log('===')
      }catch(err){console.log(err)}
    }
    setOldCard(nodes[currentCard].uuid)
    setCurrentCard(nodes[currentCard].next)
  }

  const selectNode = (node:any)=>{
    if(node.action){
      try{
        console.log('===')
        const res = eval(node.action)
        console.log(res)
        console.log('===')
      }catch(err){console.log(err)}
    }
    setOldCard(nodes[currentCard].uuid)
    setCurrentCard(node.next)
  }

  // console.log(nodes[currentCard], currentCard, chapter)

  let item = nodes[currentCard]

  const reset = ()=>{
    setCurrentCard(Object.keys(chapter.nodes)[0])
  }

  const toEditor =()=>{
    navigate('/editor')
  }

  const toPrev = () =>{
    setCurrentCard(oldCard)
  }

  return <div style={{width:'100%', display:'flex', justifyContent:'center'}}>
    <Card style={{width:'90%'}}>
      <CardContent>
        <Typography>
          <div className='content' dangerouslySetInnerHTML={{__html: item?.title || (item?.type==='decision' && (item as any)?.question ||'')}}></div>
          </Typography>
        <Typography fontSize={12}>
          <div className='content' dangerouslySetInnerHTML={{__html:item?.desc}}>
          </div>
        </Typography>
      </CardContent>
      {
        item?.type==='start' || item?.type==='common'
        ? <CardActions>
          <Button onClick={next} size="small">下一步</Button>
        </CardActions>
        :null
      }
      {
        item?.type==='decision'
        ?<div>
          <List>
            {
              (item as DecisionNode).options?.map?.((ele:string, index:number)=>(
                <ListItemButton key={index} onClick={()=>{
                  selectNode(nodes[ele])
                }}>
                  <ListItem>
                    <div>
                    <Typography>{nodes[ele].title}</Typography> 
                    <Typography fontSize={12}>
                      <div className='content' dangerouslySetInnerHTML={{__html:nodes[ele].desc}}>
                      </div>
                    </Typography>
                    </div>
                  </ListItem>
                </ListItemButton>
              ))
            }
          </List>
        </div>
        :null
      }
      
      {
        !item
        ?<div>
          <Typography style={{paddingLeft:20}}>故事线尚待完善</Typography> 
          <Button onClick={reset}>重新开始</Button>
          <Button onClick={toEditor}>新建故事线</Button>
          {props.editor?<Button onClick={toPrev}>上一步</Button>:null}
        </div>
        :null
      }
    </Card>
    
  </div>
}

